<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <p>
            品牌: <select v-model="info.brand" name="" id="">
                <option value="0">奔驰</option>
                <option value="1">宝马</option>
                <option value="2">奥迪</option>
            </select>
        </p>
        <p>
            排放: <select v-model="info.letOut" name="" id="">
                <option value="1.5">1.5</option>
                <option value="2.0">2.0</option>
                <option value="3.0">3.0</option>
            </select>
        </p>
        <p>
            价格: <input v-model="info.price" type="text">
        </p>
        <ul>
            <li v-for="item in list">
                {{ item.brand }} --- {{ item.price }} --- {{ item.letOut }}
            </li>
        </ul>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/Mock.js/1.0.1-beta3/mock-min.js"></script>
    <script>
        // Mock.mock('/getList', {
        //     "list|10-20": [
        //         {
        //             "id|+1": 1,
        //             "price|100-150": 100,
        //             "brand|+1": ['奥迪', '奔驰', '宝马'],
        //             "letOut|+1": ['1.5', '2.0', '3.0']
        //         }
        //     ]
        // })

        let data = [{ "id": 1, "price": 102, "brand": "2", "letOut": "3.0" }, { "id": 2, "price": 106, "brand": "0", "letOut": "3.0" }, { "id": 3, "price": 136, "brand": "1", "letOut": "2.0" }, { "id": 4, "price": 149, "brand": "2", "letOut": "1.5" }, { "id": 5, "price": 133, "brand": "0", "letOut": "2.0" }, { "id": 6, "price": 102, "brand": "1", "letOut": "1.5" }, { "id": 7, "price": 120, "brand": "2", "letOut": "1.5" }, { "id": 8, "price": 104, "brand": "0", "letOut": "2.0" }, { "id": 9, "price": 116, "brand": "1", "letOut": "3.0" }, { "id": 10, "price": 140, "brand": "2", "letOut": "1.5" }, { "id": 11, "price": 139, "brand": "0", "letOut": "2.0" }, { "id": 12, "price": 134, "brand": "1", "letOut": "3.0" }, { "id": 13, "price": 107, "brand": "2", "letOut": "1.5" }]
        // Mockjs处理逻辑

        // 请求接口携带参数
        Mock.mock(RegExp('/getCar' + ".*"), (req) => {
            // 'abc?def'.split('?')
            // split() 将字符串根据条件分割为数据
            let params = req.url.split('?')
            let price = params[1].split('&')[0].split('=')[1]
            let brand = params[1].split('&')[1].split('=')[1]
            let letOut = params[1].split('&')[2].split('=')[1]

            let arr = []

            if (brand) {
                arr = data.filter(item => item.brand === brand)
                if (letOut) {
                    arr = arr.filter(item => item.letOut === letOut)
                    if (price) {
                        arr = arr.filter(item => String(item.price).includes(price))
                    }
                }
            }
            return arr
        })
        const app = new Vue({
            el: "#app",
            data: {
                count: 10,
                info: {
                    price: "",
                    brand: "",
                    letOut: ""
                },
                list: []
            },
            watch: {
                // 开启深度监听
                info: {
                    deep: true,
                    handler(value) {
                        axios.get('/getCar', {
                            params: {
                                price: value.price,
                                brand: value.brand,
                                letOut: value.letOut
                            }
                        }).then(res => {
                            this.list = res.data
                        })
                    }
                }
            }
        })
    </script>
</body>

</html>